<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Beep,Beep. Motherfucker!</h1>
  <div id="container"></div>
  <script src="/xuni/bundle.js"></script>
  <script>
    let str = `
      <ul>
        {{ #arr }}
        <li>
          <div class="hd">{{ name }}的信息</div>
          <div class="bd">
            <p>姓名：{{ name }}</p>
            <p>年龄：{{ age }}</p>
            <p>性别：{{ sex }}</p>
            <p>
              {{ #fruits }}
              <p class="jj"> {{ . }} </p>
              {{ /fruits }}  
            </p>
          </div>
        </li>
        {{ /arr }}
      </ul>
    `
    const data = {
      arr: [
        { name: 'jk', age: 23, sex: 'female', fruits: [ 'apple', 'orange' ] },
        { name: 'jk2', age: 24, sex: 'male', fruits: [ 'pear', 'watermelon' ] },
        { name: 'jk3', age: 23, sex: 'female', fruits: [ 'banana' ] }
      ]
    }

    // let str = '我爱{{ somebody }}，但是 {{ somebody }}爱着狗，为他花了 {{ num.money }} 元！';
    // const data = {
    //   somebody: '小猫猫',
    //   num : {
    //     money : 100
    //   }
    // }
    let domstr = window.bohrapsEngine.render(str, data);
    document.getElementById('container').innerHTML = domstr;
  </script>
</body>
</html>